/* * @moudule:@/views/home/incomeVip * @author:zm * @date:2020-11-17 * */

<template>
  <div class="productView_container">
    <header>
      <p v-if="formInline.ATTR_TYPE == 1">政企客户属性</p>
      <p v-if="formInline.ATTR_TYPE == 2">政企服务属性</p>
    </header>
    <main>
      <el-form :inline="true" :model="formInline" class="main_searchBar" ref="form">
        <el-form-item label="区域:">
          <dx-cascader :area_id.sync="formInline.AREA_ID" ref="cascader" />
        </el-form-item>
        <el-form-item label="年份:" v-show="tabActive == 'list2'">
          <el-date-picker
            size="mini"
            v-model="formInline.ACCT_MONTH"
            value-format="yyyyMM"
            format="yyyy"
            type="year"
            placeholder="选择年"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="账期:" v-show="tabActive == 'list1'">
          <el-date-picker
            size="mini"
            v-model="formInline.ACCT_MONTH"
            value-format="yyyyMM"
            format="yyyyMM"
            type="month"
            placeholder="选择月"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="政企属性:">
          <el-select size="mini" v-model="formInline.ATTR_TYPE" clearable>
            <el-option v-for="(item, index) in sxList" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行业类型:" v-show="formInline.ATTR_TYPE == 2">
          <el-select size="mini" v-model="formInline.HSX_TYPE" clearable>
            <el-option v-for="(item, index) in hylxList" :key="index" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指标:" v-show="tabActive == 'list2'">
          <el-select size="mini" v-model="formInline.INDEX_CODE" clearable>
            <el-option v-for="(item, index) in zbList" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="统计类型:">
          <el-select size="mini" v-model="formInline.statisticalType" clearable>
            <el-option v-for="(item, index) in typeList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='客户经理名称:' v-if="formInline.statisticalType == 'VIP' || formInline.statisticalType == '客户经理'">
            <el-input placeholder="请输入" v-model="formInline.MANAGER_NAME"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" id="search_btn" @click="handle_search">查询</el-button>
          <el-button size="mini" id="export_btn" @click="handle_export">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="tables">
        <el-tabs v-model="tabActive" type="card" style="margin-top: 10px;">
          <el-tab-pane label="汇总表" name="list1"></el-tab-pane>
          <el-tab-pane label="分月趋势报表" name="list2"></el-tab-pane>
        </el-tabs>
        <el-table
          v-show="tabActive == 'list1'"
          :max-height="height + 'px'"
          id="table"
          size="mini"
          :header-cell-style="{ background: '#eef1f6' }"
          :data="tableData1"
          border
          style="width: 100%"
          v-loading="showTableLoading"
        >
          <el-table-column fixed prop="vip_NBR" label="VIP卡号/客户名称" min-width="120" v-if="isShow && isShowCustomer"></el-table-column>
          <el-table-column fixed prop="vip_NAME" label="VIP名称" min-width="120" v-if="isShow && isShowCustomer"></el-table-column>
          <el-table-column prop="area_NAME" label="区域名称" min-width="120"></el-table-column>
          <el-table-column prop="p_AREA_NAME" label="支局名称" min-width="120" v-if="isShow"></el-table-column>
          <el-table-column prop="hsx_TYPE" label="行业类型" min-width="120" v-if="HSX_TYPE_SHOW && isShow"></el-table-column>
          <el-table-column prop="manager_NAME" label="客户经理名称" min-width="120" v-if="isShow"></el-table-column>
          <el-table-column prop="zylast_PERIOD" label="主营收入上年累计" min-width="120"></el-table-column>
          <el-table-column prop="zyindex_VALUE" label="主营收入本年累计" min-width="120"></el-table-column>
          <el-table-column prop="zyincomb" label="主营收入同比变化" min-width="120"></el-table-column>
          <el-table-column prop="mhlast_PERIOD" label="码号收入上年累计" min-width="120"></el-table-column>
          <el-table-column prop="mhindex_VALUE" label="码号收入本年累计" min-width="120"></el-table-column>
          <el-table-column prop="mhincomb" label="码号收入同比变化" min-width="120"></el-table-column>
          <el-table-column prop="jblast_PERIOD" label="基本面收入上年累计" min-width="140"></el-table-column>
          <el-table-column prop="jbindex_VALUE" label="基本面收入本年累计" min-width="140"></el-table-column>
          <el-table-column prop="jbincomb" label="基本面收入同比变化" min-width="140"></el-table-column>
          <el-table-column prop="dictlast_PERIOD" label="DICT收入上年累计" min-width="140"></el-table-column>
          <el-table-column prop="dictindex_VALUE" label="DICT收入本年累计" min-width="140"></el-table-column>
          <el-table-column prop="dictincomb" label="DICT收入同比变化" min-width="140"></el-table-column>
          <el-table-column prop="kdlast_PERIOD" label="宽带收入上年累计" min-width="120"></el-table-column>
          <el-table-column prop="kdindex_VALUE" label="宽带收入本年累计" min-width="120"></el-table-column>
          <el-table-column prop="kdincomb" label="宽带收入同比变化" min-width="120"></el-table-column>
          <el-table-column prop="zxlast_PERIOD" label="专线收入上年累计" min-width="120"></el-table-column>
          <el-table-column prop="zxindex_VALUE" label="专线收入本年累计" min-width="120"></el-table-column>
          <el-table-column prop="zxincomb" label="专线收入同比变化" min-width="120"></el-table-column>
          <el-table-column prop="swlast_PERIOD" label="上网专线收入上年累计" min-width="160"></el-table-column>
          <el-table-column prop="swindex_VALUE" label="上网专线收入本年累计" min-width="160"></el-table-column>
          <el-table-column prop="swincomb" label="上网专线收入同比变化" min-width="160"></el-table-column>
          <el-table-column prop="zwlast_PERIOD" label="组网专线收入上年累计" min-width="160"></el-table-column>
          <el-table-column prop="zwindex_VALUE" label="组网专线收入本年累计" min-width="160"></el-table-column>
          <el-table-column prop="zwincomb" label="组网专线收入同比变化" min-width="160"></el-table-column>
          <el-table-column prop="ydlast_PERIOD" label="移动收入上年累计" min-width="120"></el-table-column>
          <el-table-column prop="ydindex_VALUE" label="移动收入本年累计" min-width="120"></el-table-column>
          <el-table-column prop="ydincomb" label="移动收入同比变化" min-width="120"></el-table-column>
          <el-table-column prop="ghlast_PERIOD" label="固话收入上年累计" min-width="120"></el-table-column>
          <el-table-column prop="ghindex_VALUE" label="固话收入本年累计" min-width="120"></el-table-column>
          <el-table-column prop="ghincomb" label="固话收入同比变化" min-width="120"></el-table-column>
          <el-table-column prop="itvlast_PERIOD" label="ITV收入上年累计" min-width="120"></el-table-column>
          <el-table-column prop="itvindex_VALUE" label="ITV收入本年累计" min-width="120"></el-table-column>
          <el-table-column prop="itvincomb" label="ITV收入同比变化" min-width="120"></el-table-column>
        </el-table>
        <el-table
          v-show="tabActive == 'list2'"
          :max-height="height + 'px'"
          id="table"
          size="mini"
          :header-cell-style="{ background: '#eef1f6' }"
          :data="tableData2"
          border
          style="width: 100%"
          v-loading="showTableLoading"
        >
          <el-table-column prop="area_NAME" label="区域名称" min-width="100" fixed></el-table-column>
          <el-table-column prop="p_AREA_NAME" label="支局名称" min-width="120" fixed v-if="isShow"></el-table-column>
          <el-table-column prop="manager_NAME" label="客户经理名称" min-width="100" v-if="isShow"></el-table-column>
          <el-table-column prop="hsx_TYPE" label="行业类型" min-width="120" v-if="HSX_TYPE_SHOW && isShow"></el-table-column>
          <el-table-column prop="vip_NBR" label="VIP卡号/客户名称" min-width="120" v-if="isShow && isShowCustomer"></el-table-column>
          <el-table-column prop="vip_NAME" label="VIP名称" min-width="260" v-if="isShow && isShowCustomer"></el-table-column>
          <el-table-column prop="index_CODE" label="指标"></el-table-column>
          <el-table-column v-for="(item, index) in monthList" :prop="item.value" :label="item.name" :key="index"></el-table-column>
        </el-table>
      </div>
    </main>
  </div>
</template>

<script>
// 引入导出Excel表格依赖
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
import { $budgetAPI, $budget } from '@/api';
import { setSessionStorage, getSessionStorage, removeSessionStorage } from '@/common/js/storage';
export default {
    data() {
        return {
            tabActive: 'list1',
            formInline: {
                AREA_ID: '',
                ACCT_MONTH: '',
                HSX_TYPE: '',
                ATTR_TYPE: 2,
                INDEX_CODE: 'YS10000', //指标
                statisticalType: 'VIP',
                MANAGER_NAME: ''
            },
            HSX_TYPE_SHOW: true,
            sxList: [
                {
                    name: '政企服务属性',
                    value: 2
                },
                {
                    name: '政企客户属性',
                    value: 1
                }
            ],
            hylxList: [
                {
                    name: '行客'
                },
                {
                    name: '商客'
                },
                {
                    name: '校园'
                },
                {
                    name: '其他'
                }
            ],
            typeList: ['县分', '支局', '客户经理', 'VIP'],
            //指标列表
            zbList: [
                {
                    name: '主营业务收入',
                    value: 'YS10000'
                },
                {
                    name: '基本面收入合计',
                    value: 'YS10023'
                },
                {
                    name: '移动收入(不含ICT)',
                    value: 'YS10025'
                },
                {
                    name: '宽带收入',
                    value: 'YS10033'
                },
                {
                    name: '互联网专线',
                    value: 'YS10034'
                },
                {
                    name: '天翼高清收入',
                    value: 'YS10036'
                },
                {
                    name: '固话收入',
                    value: 'YS10039'
                },
                {
                    name: '组网专线',
                    value: 'YS10043'
                },
                {
                    name: 'ICT/IDC合计',
                    value: 'YS10049'
                },
                {
                    name: '码号收入',
                    value: 'YS10077'
                },
                {
                    name: '专线收入',
                    value: 'YS10101'
                }
            ],
            monthList: [],
            tableData1: [],
            tableData2: [],
            showTableLoading: false,
            pickerOptions: this.pickerDisabled(),
            disabledTime: '',
            height: '',
            isShow: false,
            isShowCustomer: false,
        };
    },
    mounted() {
        this.getHeight();
    },
    watch: {
        'formInline.ATTR_TYPE'(v) {
            if (v == 1) {
                document.title = '政企客户属性';
                this.formInline.INDEX_CODE = '';
                this.formInline.HSX_TYPE = '';
            } else {
                document.title = '政企服务属性';
                this.formInline.INDEX_CODE = 'YS10000';
                this.formInline.HSX_TYPE = '';
            }
        },
        tabActive(v) {
            if (v == 'list2') {
                if (this.tableData2.length == 0) {
                    this.handle_search();
                }
            }
        }
    },
    created() {
        this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
        this.formInline.AREA_ID = this.accountInfo.areaId;
        this.getMonth();
        // 计算高度
        window.addEventListener('resize', this.getHeight);
    },
    destroyed() {
        // 计算高度
        window.removeEventListener('resize', this.getHeight);
    },
    methods: {
        // 计算高度
        getHeight() {
            this.height = window.innerHeight - this.$refs.form.$el.offsetHeight - 83 - 54 - 51;
        },
        handle_search() {
            this.showTableLoading = true;

            if(this.formInline.statisticalType == '县分' || this.formInline.statisticalType == '支局'){
                this.formInline.MANAGER_NAME = '';
            }
            if (this.tabActive == 'list1') {
                $budgetAPI.VIPRevenue(
                    this.formInline,
                    res => {
                        if (res.code == 0) {
                            this.HSX_TYPE_SHOW = this.formInline.ATTR_TYPE == 2 ? true : false;

                            if(this.formInline.statisticalType == '县分'){
                                this.isShow = false;
                                this.isShowCustomer =false;
                            }
                            if(this.formInline.statisticalType == '客户经理'){
                                this.isShow = true;
                                this.isShowCustomer = false;
                            }
                            if(this.formInline.statisticalType == '支局'){
                                this.isShow = false;
                                this.isShowCustomer = false;
                            }
                            if(this.formInline.statisticalType == 'VIP'){
                                this.isShow = true;
                                this.isShowCustomer = true;
                            }

                            this.tableData1 = res.content.content.data;
                        }
                        this.showTableLoading = false;
                    },
                    err => {
                        this.showTableLoading = false;
                    }
                );
            } else {
                $budgetAPI.monthRevenue(
                    {
                        AREA_ID: this.formInline.AREA_ID,
                        ACCT_MONTH: this.formInline.ACCT_MONTH.substr(0, 4),
                        HSX_TYPE: this.formInline.HSX_TYPE,
                        ATTR_TYPE: this.formInline.ATTR_TYPE,
                        INDEX_CODE: this.formInline.INDEX_CODE,
                        statisticalType: this.formInline.statisticalType,
                        MANAGER_NAME: this.formInline.MANAGER_NAME
                    },
                    res => {
                        if (res.code == 0) {
                            this.HSX_TYPE_SHOW = this.formInline.ATTR_TYPE == 2 ? true : false;
                            if(this.formInline.statisticalType == '县分'){
                                this.isShow = false;
                                this.isShowCustomer =false;
                            }
                            if(this.formInline.statisticalType == '客户经理'){
                                this.isShow = true;
                                this.isShowCustomer = false;
                            }
                            if(this.formInline.statisticalType == '支局'){
                                this.isShow = false;
                                this.isShowCustomer =false;
                            }
                            if(this.formInline.statisticalType == 'VIP'){
                                this.isShow = true;
                                this.isShowCustomer =true;
                            }
                            this.tableData2 = res.content.content.data;
                        }
                        this.showTableLoading = false;
                    },
                    err => {
                        this.showTableLoading = false;
                    }
                );
            }
        },
        // 导出
        handle_export() {
            let name = this.formInline.ATTR_TYPE == 1 ? '政企客户属性' : '政企服务属性';

            

            // var arr = []; 
            // var arr1 = [];
            // for (var key in fields) {
            //     var obj = {}; 
            //     obj[key] = fields[key];
            //     arr.push(obj); 
            // }

            this.loading = this.$loading({
                lock: true,
                text: '导出中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            if(this.formInline.statisticalType == '县分' || this.formInline.statisticalType == '支局'){
                this.formInline.MANAGER_NAME = '';
            }
            
            if (this.tabActive == 'list1') {
                let fields = {
                vip_NBR: 'VIP卡号',
                vip_NAME: 'VIP名称',
                area_NAME: '区域名称',
                // area_LVL: '区域级别',
                p_AREA_NAME: '支局名称',
                hsx_TYPE: '行业类型',
                manager_NAME: '客户经理名称',
                zylast_PERIOD: '主营收入上年累计',
                zyindex_VALUE: '主营收入本年累计',
                zyincomb: '主营收入同比变化',
                mhlast_PERIOD: '码号收入上年累计',
                mhindex_VALUE: '码号收入本年累计',
                mhincomb: '码号收入同比变化',
                jblast_PERIOD: '基本面收入上年累计',
                jbindex_VALUE: '基本面收入本年累计',
                jbincomb: '基本面收入同比变化',
                dictlast_PERIOD: 'DICT收入上年累计',
                dictindex_VALUE: 'DICT收入本年累计',
                dictincomb: 'DICT收入同比变化',
                kdlast_PERIOD: '宽带码号收入上年累计',
                kdindex_VALUE: '宽带码号收入本年累计',
                kdincomb: '宽带码号收入同比变化',
                zxlast_PERIOD: '专线码号收入上年累计',
                zxindex_VALUE: '专线码号收入本年累计',
                zxincomb: '专线码号收入同比变化',
                swlast_PERIOD: '上网专线码号收入上年累计',
                swindex_VALUE: '上网专线码号收入本年累计',
                swincomb: '上网专线码号收入同比变化',
                zwlast_PERIOD: '组网专线码号收入上年累计',
                zwindex_VALUE: '组网专线码号收入本年累计',
                zwincomb: '组网专线码号收入同比变化',
                ydlast_PERIOD: '移动码号收入上年累计',
                ydindex_VALUE: '移动码号收入本年累计',
                ydincomb: '移动码号收入同比变化',
                ghlast_PERIOD: '固话码号收入上年累计',
                ghindex_VALUE: '固话码号收入本年累计',
                ghincomb: '固话码号收入同比变化',
                itvlast_PERIOD: 'ITV码号收入上年累计',
                itvindex_VALUE: 'ITV码号收入本年累计',
                itvincomb: 'ITV码号收入同比变化',
            };

                if (this.formInline.statisticalType == '县分' || this.formInline.statisticalType == '支局'){
                    delete fields.vip_NBR;
                    delete fields.vip_NAME;
                    delete fields.hsx_TYPE;
                    delete fields.manager_NAME;
                    delete fields.area_LVL;
                    delete fields.p_AREA_NAME;
                }
                if (this.formInline.statisticalType == '客户经理'){
                    delete fields.vip_NBR;
                    delete fields.vip_NAME;
                    // delete fields.p_AREA_NAME;
                    delete fields.area_LVL;
                }
                
                $budgetAPI.VIPRevenue(
                    {
                        AREA_ID: this.formInline.AREA_ID,
                        ACCT_MONTH: this.formInline.ACCT_MONTH,
                        HSX_TYPE: this.formInline.HSX_TYPE,
                        ATTR_TYPE: this.formInline.ATTR_TYPE,
                        pageSize: 10000,
                        statisticalType: this.formInline.statisticalType,
                        MANAGER_NAME: this.formInline.MANAGER_NAME
                    },
                    res => {
                        this.loading.close();
                        if (res.code == 0) {
                            let data = res.content.content.data;
                            data.forEach(item => {
                                for (let i in item) {
                                    if (fields.hasOwnProperty(i)) {
                                        item[fields[i]] = item[i];
                                        // if(arr1.length <= arr.length) {
                                        //     arr1.push(i);
                                        // }
                                    }
                                    delete item[i]; //删除原先的对象属性
                                }
                            });
                            // var obj = {};
                            // arr1.map(it => {
                            //     if(fields[it]) {
                            //         obj[it] = fields[it]
                            //     }
                            // })
                            let workbook = XLSX.utils.book_new();
                            let ws = XLSX.utils.json_to_sheet(data, {
                                header: Object.values(fields)
                            });
                            XLSX.utils.book_append_sheet(workbook, ws, name);
                            let wbOut = XLSX.write(workbook, {
                                bookType: 'xlsx',
                                bookSST: true,
                                type: 'array'
                            });
                            try {
                                FileSaver.saveAs(
                                    new Blob([wbOut], {
                                        type: 'application/octet-stream'
                                    }),
                                    name + '.xlsx' //Demo.xlsx为导出的表格的名称
                                );
                            } catch (e) {
                                if (typeof console !== 'undefined') console.log(e, wbOut);
                            }
                            return wbOut;
                        }
                    },
                    err => {
                        this.loading.close();
                    }
                );
            } else {
                let fields = {
                    vip_NBR: 'VIP卡号',
                    vip_NAME: 'VIP名称',
                    area_NAME: '区域名称',
                    // area_LVL: '区域级别',
                    p_AREA_NAME: '支局名称',
                    hsx_TYPE: '行业类型',
                    manager_NAME: '客户经理名称',
                    index_CODE: '指标',
                    value1: '1月',
                    value2: '2月',
                    value3: '3月',
                    value4: '4月',
                    value5: '5月',
                    value6: '6月',
                    value7: '7月',
                    value8: '8月',
                    value9: '9月',
                    value10: '10月',
                    value11: '11月',
                    value12: '12月'
                };

                if (this.formInline.statisticalType == '县分' || this.formInline.statisticalType == '支局'){
                    delete fields.vip_NBR;
                    delete fields.vip_NAME;
                    delete fields.hsx_TYPE;
                    delete fields.manager_NAME;
                    delete fields.area_LVL;
                    delete fields.p_AREA_NAME;
                }
                if (this.formInline.statisticalType == '客户经理'){
                    delete fields.vip_NBR;
                    delete fields.vip_NAME;
                    // delete fields.p_AREA_NAME;
                    delete fields.area_LVL;
                }

                $budgetAPI.monthRevenue(
                    {
                        AREA_ID: this.formInline.AREA_ID,
                        ACCT_MONTH: this.formInline.ACCT_MONTH.substr(0, 4),
                        HSX_TYPE: this.formInline.HSX_TYPE,
                        ATTR_TYPE: this.formInline.ATTR_TYPE,
                        INDEX_CODE: this.formInline.INDEX_CODE,
                        pageSize: 10000,
                        statisticalType: this.formInline.statisticalTyp,
                        MANAGER_NAME: this.formInline.MANAGER_NAME
                    },
                    res => {
                        this.loading.close();
                        if (res.code == 0) {
                            let data = res.content.content.data;
                            data.forEach(item => {
                                for (let i in item) {
                                    if (fields.hasOwnProperty(i)) {
                                        item[fields[i]] = item[i];
                                    }
                                    delete item[i]; //删除原先的对象属性
                                }
                            });
                            let workbook = XLSX.utils.book_new();
                            let ws = XLSX.utils.json_to_sheet(data, {
                                header: Object.values(fields)
                            });
                            XLSX.utils.book_append_sheet(workbook, ws, name);
                            let wbOut = XLSX.write(workbook, {
                                bookType: 'xlsx',
                                bookSST: true,
                                type: 'array'
                            });
                            try {
                                FileSaver.saveAs(
                                    new Blob([wbOut], {
                                        type: 'application/octet-stream'
                                    }),
                                    name + '.xlsx' //Demo.xlsx为导出的表格的名称
                                );
                            } catch (e) {
                                if (typeof console !== 'undefined') console.log(e, wbOut);
                            }
                            return wbOut;
                        }
                    },
                    err => {
                        this.loading.close();
                    }
                );
            }
        },
        getMonth() {
            $budgetAPI.incomeKeepRegionalMonth(
                {
                    maximum: 6
                },
                res => {
                    if (res.code == 0) {
                        this.formInline.ACCT_MONTH = res.content;
                        this.disabledTime = res.content;
                        let disabledMonth = parseInt(this.disabledTime.substring(4));
                        for (let i = 0; i < disabledMonth; i++) {
                            this.monthList.push({
                                name: i + 1 + '月',
                                value: 'value' + (i + 1)
                            });
                        }
                        this.handle_search();
                    }
                },
                err => {
                    console.log(err);
                }
            );
        },
        pickerDisabled() {
            let self = this;
            return {
                disabledDate(time) {
                    if (self.disabledTime) {
                        var timeyear = time.getFullYear();
                        var timemonth = time.getMonth() + 1;
                        if (timemonth >= 1 && timemonth <= 9) {
                            timemonth = '0' + timemonth;
                        }
                        var currentdate = timeyear.toString() + timemonth.toString();
                        if (currentdate > self.disabledTime) {
                            return true;
                        }
                    }
                }
            };
        }
    }
};
</script>

<style lang="scss" scoped>
.productView_container {
    width: 100%;
    height: 100%;
    & > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        & > p {
            font-weight: bold;
            font-size: 15px;
        }
    }
    & > main {
        padding: 0 10px 10px;
        .main_searchBar {
            border-bottom: 1px solid #d6d9e5;
            /deep/ .el-form-item {
                margin: 6px 10px 6px 0;
            }
            button {
                color: #fff;
                border: none;
                outline: none;
                &:hover {
                    opacity: 0.8;
                }
            }
            #search_btn {
                background-color: #2a90de;
            }
            #export_btn {
                background-color: #2cd531;
            }
        }
        .main_navBar {
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .area {
                text-align: left;
                display: flex;
                .it {
                    cursor: pointer;
                    font-size: 14px;
                    display: inline-block;
                    .td {
                        font-weight: bold;
                    }
                    &:last-child {
                        span {
                            &:last-child {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
